<template>
  <div class="contentStyle">

    <Aida64
      showType="card"
      :url="data.aida64ApiUrl"
      :pageConfig="data.aida64PageConfig"
    />
    <div class="backgroundStyle">
      <MaskingOut :mode="data.maskingOutMode" />
    </div>
    <div class="audioVisualizationStyle">
      <AudioVisualization />
    </div>

    <!-- <span class="opUrlStyle">开源地址{{ openUrl }}</span> -->

    <!-- <div class="t3c">
      <Typography3DCss />
    </div> -->

    <div class="workingClockStyle">
      <!-- <WorkingClock/> -->
      <DigitalClock />
    </div>
    <div class="testClass">
      <p>当前坐标为：（{{ data.mouseX }}，{{ data.mouseY }}）</p>
    </div>
    <div class="perspectiveTextHoverStyle">
      <PerspectiveTextHover :content="data.textContent" />
    </div>
    <div class="aboutPageStyle">
      <AboutPage />
    </div>

  </div>
</template>

<script setup>
// import HelloWorld from './components/HelloWorld.vue'
// import Test from './components/TestPage.vue'
import Aida64 from './components/Aida64Page.vue'
import Typography3DCss from './components/misc/Typography3DCss.vue'
import WorkingClock from './components/misc/WorkingClock.vue'
import DigitalClock from './components/misc/DigitalClock.vue'
import PerspectiveTextHover from './components/misc/PerspectiveTextHover.vue'
import MaskingOut from './components/MaskingOut/MaskingOut.vue'
import AudioVisualization from './components/AudioVisualization.vue'
import AboutPage from './components/AboutPage.vue'
// import SnowMasking from '@/components/MaskingOut/Background/SnowMasking'
// import SolarSystemMasking2 from '@/components/MaskingOut/Background/SolarSystemMasking'
// import GradientBackground from '@/components/MaskingOut/Background/GradientBackground'
// import MoleculeOrbitMasking from '@/components/MaskingOut/Background/MoleculeOrbitMasking'
// import { Calendar as aCalendar, LayoutSider, Layout, LayoutHeader, LayoutContent, LayoutFooter, Col as aCol, Row as aRow } from 'ant-design-vue';
import { reactive, ref, onMounted } from 'vue'

const data = reactive({
  mouseX: 0,
  mouseY: 0,
  maskingOutMode: 1,
  clock: {
    type: 0,
    left: 'none',
    right: '20px',
    top: '20px',
    bottom: 'none',
  },
  theme: {
    accentColor: 'blur',
    color: '#ffffff',
    backgroundColor: 'black',
  },
  aida64ApiUrl: 'http://127.0.0.1:8070/',
  background: {

  },

  textContent: ['', '第一句╰(*°▽°*)╯', '第二句(*/ω＼*)', '第三句ಥ_ಥ', '第四句( ´･･)ﾉ(._.`)', '第五句(^///^)'],

  aida64PageConfig: {}

})

const testAida64PageConfig = {
  borders: [
    {
      title: 'CPU基础信息',
      borderType: 1,
      style: {
        width: '365px',
        height: '350px',
        left: '0px',
        top: '0px',
        textAlign: 'left'
      }
    },
    {
      title: 'CPU使用率',
      borderType: 1,
      style: {
        width: '335px',
        height: '350px',
        left: '370px',
        top: '0px',
      }
    },
    {
      title: '内存使用率',
      borderType: 1,
      style: {
        width: '335px',
        height: '350px',
        left: '710px',
        top: '0px'
      }
    },
    {
      borderType: 1,
      style: {
        width: '335px',
        height: '100px',
        left: '710px',
        top: '250px'
      }
    },
    {
      borderType: 1,
      title: '虚拟内存使用率',
      style: {
        width: '335px',
        height: '350px',
        left: '1050px',
        top: '0px'
      }
    },
    {
      borderType: 1,
      style: {
        width: '335px',
        height: '100px',
        left: '1050px',
        top: '250px',
        animation: 'none',
      }
    },
    {
      title: '系统基础信息',
      borderType: 1,
      style: {
        width: '440px',
        height: '500px',
        left: '0px',
        top: '380px',
        textAlign: 'left'
      }
    },
    // {
    //   title: '内存使用情况',
    //   borderType: 1,
    //   style: {
    //     width: '480px',
    //     height: '500px',
    //     left: '450px',
    //     top: '380px',
    //     textAlign: 'left'
    //   }
    // },
    {
      title: '内存使用情况',
      borderType: 2,
      style: {
        width: '480px',
        height: '500px',
        left: '450px',
        top: '380px',
        textAlign: 'left',
        boxStyle:{
          border: '15px solid',
          borderImage: 'linear-gradient(var(--angle), red, yellow) 1',
        }
        
      }
    }
  ]
}
data.aida64PageConfig = testAida64PageConfig;
//读取wallpaper传递过来的参数
window.wallpaperPropertyListener = {
  applyUserProperties: (properties) => {
    if (properties.color) {
      // Convert the custom color to 0 - 255 range for CSS usage
      let customColor = properties.color.value.split(' ');
      customColor = customColor.map(function (c) {
        return Math.ceil(c * 255);
      });
      data.theme.color = 'rgb(' + customColor + ')';
    }
    if (properties.accentcolor) {
      let customColor = properties.accentcolor.value.split(' ');
      customColor = customColor.map(function (c) {
        return Math.ceil(c * 255);
      });
      data.theme.accentColor = 'rgb(' + customColor + ')';
    }
    if (properties.textcontent) {
      let content = properties.textcontent.value.split('|');//由于wallpaper的输入无法换行，这里采用|来代替换行符
      data.textContent = content.length > 0 ? content : '|' + [properties.textcontent.value];
    }
    if (properties.maskingoutmode) {
      data.maskingOutMode = properties.maskingoutmode.value;
    }
    if (properties.backgroundColor) {
      let customColor = properties.backgroundColor.value.split(' ');
      customColor = customColor.map(function (c) {
        return Math.ceil(c * 255);
      });
      data.theme.backgroundColor = 'rgb(' + customColor + ')';
    }
    if (properties.aida64PageConfig) {
      data.aida64PageConfig = JSON.parse(properties.aida64PageConfig.value);
    }
    //尚存在跨域问题，暂时固定端口
    // if (properties.aida64apiport) {
    //   data.aida64apiurl = properties.aida64apiport.value
    // }
  },
};


window.addEventListener('mousemove', (event) => {
  data.mouseX = event.clientX;
  data.mouseY = event.clientY;
});

var value = ref();
var openUrl = ref('https://gitee.com/fieldtianye/wallpaper-test-vue3');

document.addEventListener('keydown', function (event) {
  event.preventDefault();  // 禁止按键输入行为
});
document.addEventListener('click', function (event) {
  // event.preventDefault();  // 禁止鼠标点击行为
  console.log("鼠标点击了" + event)
});

onMounted(() => {
  // 隐藏垂直滚动条
  document.documentElement.style.overflowY = "hidden";

  // 隐藏水平滚动条
  document.documentElement.style.overflowX = "hidden";
})

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  /* 感觉向是bug或一些特殊的特性，铺不满，这里做补偿。网页上无需此补偿，但桌面貌似有些时候会出这个问题 */
  /* margin-top: -30px; */

  /* height: 100vh; */
  /* color: #2c3e50; */
  /* background: rgb(77, 75, 105); */
  /* margin-top: 60px; */
}

.contentStyle {
  text-align: center;
  height: 100vh;
  /* line-height: 120px; */
  color: v-bind("data.theme.color");
  /* background-color: transparent; */
  background: v-bind("data.theme.backgroundColor");
  /* background-color: #108ee9; */
  /* background: url('./assets/images/DSC06453.jpg') no-repeat; */
  /* background-size: 100% 100%; */
  /* background-attachment: fixed; */
}

.testClass {
  position: absolute;
  right: 20px;
  bottom: 20px;
  font-size: 15px;
}

.t3c {
  position: absolute;
  right: 300px;
  bottom: 50px;
}

.opUrlStyle {
  position: absolute;
  left: 20px;
  bottom: 20px;
  /* max-height: 80px; */
}

.workingClockStyle {
  position: absolute;
  /* top: 10px;
  right: 10px; */
  top: v-bind("data.clock.top");
  bottom: v-bind("data.clock.bottom");
  left: v-bind("data.clock.left");
  right: v-bind("data.clock.right");
}

.backgroundStyle {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: absolute;
  /* z-index: -999; */
  top: 0;
  pointer-events: none;
}

.perspectiveTextHoverStyle {
  position: absolute;
  left: 50%;
  top: 30%;
  z-index: 100;
}

.audioVisualizationStyle {
  position: absolute;
  left: 0;
  top: 0;
  /* left: 10%; */
  /* top: 30%; */
}

.aboutPageStyle {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
</style>
